<template>
  <view class="app-container">
    <image class="background" src="/static/images/background.png" mode="aspectFill"></image>

    <view class="bar-box" :style="{ marginTop: titleMargin + 'px' }">
      <image class="back" src="/static/images/back.png" @click="back"></image>
      <view class="title">文章详情</view>
    </view>

    <view class="box">
      <view class="title">{{ info.title }}</view>
      <view class="time">{{ info.create_time }}</view>
      <scroll-view scroll-y enable-flex class="content">
        <rich-text space="nbsp" :nodes="info.content"></rich-text>
      </scroll-view>
    </view>

  </view>
</template>

<script>
export default {
  data() {
    return {
      titleMargin: 0, // 动态顶部间距
      info: [],
    };
  },
  created() {
    this.setDynamicMargin(); // 设置动态间距
  },

  onLoad: function (options){
    uni.hideShareMenu();

    let id = options.id;

    this.$http.post('/index/Api/bannerArticleDetail', {id}).then(res => {
      if(res.data.result === 1){
        this.info = res.data.data;
      }else{
        this.$common.doErrorResult(res)
      }
    })

  },

  methods: {
    setDynamicMargin() {
      const windowInfo = uni.getWindowInfo();
      this.titleMargin = windowInfo.statusBarHeight + 10; // 直接使用状态栏高度
    },

    back: function () {
      uni.navigateBack();
    },
  },
}
</script>

<style lang="scss">
.app-container {
  display: flex;
  flex-direction: column;
  align-items: center;

  .box {
    width: 90%;
    display: flex;
    padding: 20rpx;
    border-radius: 20rpx;
    background: #fff;
    opacity: 0.85;
    margin-top: 20rpx;
    flex-direction: column;
    align-items: center;

    .title{
      font-size: 40rpx;
    }

    .time {
      font-size: 32rpx;
      margin-top: 20rpx;
    }

    .content {
      height: 77vh;
      padding: 20rpx 0;
    }
  }

}
</style>

